<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>列表过滤</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p, index) of filterPersons" :key="index">
                {{ p.name }} - {{ p.age }} - {{ p.gender }}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                keyWord: '',
                persons: [
                    { id: '001', name: '马冬梅', age: 19, gender: '女' },
                    { id: '002', name: '周冬雨', age: 20, gender: '女' },
                    { id: '003', name: '周杰伦', age: 21, gender: '男' },
                    { id: '004', name: '温兆伦', age: 22, gender: '男' }
                ],
                // filterPersons: []
            },

            // watch 实现
            // watch: {
            //     keyWord: {
            //         immediate: true,
            //         handler(newValue) {
            //             this.filterPersons = this.persons.filter(item => item.name.includes(newValue))
            //         }
            //     }
            // }

            // computed 实现
            computed: {
                filterPersons() {
                    return this.persons.filter(item => item.name.includes(this.keyWord))
                }
            }
        })
    </script>
</body>
</html>